import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import './App.css';

// 导入页面组件
import Home from './pages/Home';
import UserList from './pages/UserList';
import UserDetail from './pages/UserDetail';
import MomentList from './pages/MomentList';
import ApiTest from './pages/ApiTest';

const { Header, Content, Footer } = Layout;

function App() {
  return (
    <Router>
      <Layout className="layout" style={{ minHeight: '100vh' }}>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/users">用户列表</Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to="/moments">动态列表</Link>
            </Menu.Item>
            <Menu.Item key="4">
              <Link to="/api-test">API测试</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px', marginTop: 64 }}>
          <div className="site-layout-content" style={{ padding: 24, minHeight: 380 }}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/users" element={<UserList />} />
              <Route path="/users/:id" element={<UserDetail />} />
              <Route path="/moments" element={<MomentList />} />
              <Route path="/api-test" element={<ApiTest />} />
            </Routes>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          APIJSON React Demo ©{new Date().getFullYear()} Created with Spring Boot 3 & React
        </Footer>
      </Layout>
    </Router>
  );
}

export default App; 